<template>
	<div class="box-model">
		<div class="padding-left-right-15">
			<div class="box-news-title">
				<div class="box-title-text">
					<span class="left title-text-content">小鹿头条</span>
					<router-link :to="{name:'NewsMore'}">
						<span class="right more">更多<i class="mui-icon mui-icon-arrowright"></i></span>
					</router-link>
				</div>
			</div>
			<ul class="mui-table-view none-top-bottom-line no-padding-lr-li">
				<template v-for="(item,$index) in newsdata">
					<li class="mui-table-view-cell mui-media">
						<router-link :to="{name:'Newsinfo',params:{data:item}}">
							<img src="../../../static/banner.jpg" class="mui-media-object mui-pull-left news-img">
							<div class="mui-media-body news-info">
								<p class="news-info-title">{{item.title}}</p>
								<p class="news-times">{{item.updateTime|getday}}</p>
							</div>
						</router-link>
					</li>
				</template>
				
			</ul>
		</div>
	</div>
</template>
<script>
	import {getTimeDay} from '../../gloabl/common.js'
	export default{
		props:['newsdata'],
		filters:{
			getday(val){
				return getTimeDay(val);
			}
		}
	}
</script>
<style scoped="scoped">
	.news-info-title{
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 14px;
		text-align: left;
	}
	.news-info{
		text-align: left;
		height: 82px;
		position: relative;
	}
	.news-times{
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 11px;
		color: #999999;
	}
	.news-img{
		height: 82px;
		width: 109px;
		max-width: 109px;
		border-radius: 2px;
	}
	.box-news-title{
		padding: 12.5px 0;
		padding-bottom: 0;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.box-title-text{
		width: 100%;
		overflow: hidden;
		border-left: 2px solid #F08800;
	}
	.title-text-content{
		padding-left: 10px;
		font-size: 16px;
		color: #333333;
		font-weight: 600;
	}
	.more{
		font-size: 12px;
		color: #666666;
	}
	.box-title-text
	.mui-icon{
		font-size: 16px;
		color: #666666;
	}
</style>